<template>
  <div class="container">
    <div class="center-top">
      <img v-if="!userinfo.pic" class="center-thumb" src="@/assets/images/userimg.png"/>
      <img  class="center-thumb" v-else :src="userinfo.pic"/>
      <van-uploader :after-read="afterRead">
        <van-button plain size="small" round icon="photo" type="primary">更换头像</van-button>
      </van-uploader>
    </div>
    <div class="form-box">
    <van-cell-group>
      <van-cell title="姓名" :value="userinfo.stname" />

      <van-cell title="手机号" :value="userinfo.telphone" />

      <van-cell title="性别" :value="userinfo.sex" />

      <van-cell title="身份证号" :value="userinfo.idcard" />
      <van-field
        readonly
        clickable
        name="danwei"
        :value="valueUnit"
        label="所在单位"
        placeholder="点击选择单位"
        @click="showPickerUnit = true"
        input-align="right"
        right-icon="arrow"
      />
    </van-cell-group>



    <van-popup v-model="showPickerUnit" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsUnit"
        @confirm="onConfirmUnit"
        @cancel="showPickerUnit = false"
      />
    </van-popup>
      <button class="exam-btn-info" @click="save">保存修改</button>
    </div>

    <!--<div class="btn-wrapper">-->
      <!--<button class="exam-btn" @click="save">保存修改</button>-->
    <!--</div>-->
  </div>
</template>

<script>
  import util from '@/common/util';
  export default {
    name: "editor-info",
    data() {
      return {
        userinfo: {
          id:'',
          danwei: '',
          stname: '',
          idcard: '',
          sex: '',
          telphone: '',
          pic: ''
        },
        valueUnit: '',
        columnsUnit: [],
        unit:{},
        showPickerUnit: false,
        baseURL: '',
      }
    },
    created() {
      this.baseURL = util.baseURL;
      this.getModifyUnits();
      if(util.storage.get('userinfo')){
        this.userinfo = util.storage.get('userinfo');
      }
    },
    methods: {
      getModifyUnits(){
        let that = this;
        that.$api.post('/mobile/Stmsg/jbzl',{'user':{'id':that.userinfo.id}}, r => {
          console.log('r',r);
          r.data.dw.forEach(function(item){
            that.unit['d'+item.id] = item.ldname;
            let untilsObj = {
              'text': item.ldname,
              'did': item['id']
            }
            that.columnsUnit.push(untilsObj)
          });
          that.valueUnit = that.unit['d'+that.userinfo.danwei]
        })
      },
      onConfirmUnit(value) {  //确认选择单位
        this.valueUnit = value['text'];
        this.userinfo.danwei = value['did'];
        this.showPickerUnit = false;
        console.log(this.userinfo.danwei)
      },
      save() { // 提交
        let that = this;
        let modifyData = {

          danwei: that.userinfo.danwei,
          pic: that.userinfo.pic,
          id: that.userinfo.id
        }
        //console.log(modifyData)
        that.$api.post('/mobile/Stmsg/edit',{'user':modifyData}, r => {
          console.log(r)
          if(r.code === 1){
            console.log('单位类别',r.data.kcdx);
            that.userinfo['kcdx'] = r.data.kcdx;
            util.storage.set('userinfo',that.userinfo)
            //that.$toast('修改成功')
            that.$router.push({path:'/user'})
          }
        })
      },
      afterRead(file,detail) { // 上传头像
        let that = this;
        console.log('file',file)
        this.$toast.loading({
          mask: true,
          message: '上传中...',
          duration: 0
        })

         const formData = new FormData();
        if (file.file.size > 3145728) {
          //大于3M图片压缩
          let canvas = document.createElement('canvas') // 创建Canvas对象(画布)
          let context = canvas.getContext('2d')
          let img = new Image()
          img.src = file.content // 指定图片的DataURL(图片的base64编码数据)
          console.log('img',img.width);
          let x = img.width/800;

          let canvaswidth = img.width==0 ? 800 : img.width/x;
          let canvasheight = img.height==0 ? 600 : img.height/x;
          img.onload = () => {
            canvas.width = canvaswidth;
            canvas.height = canvasheight;
            context.drawImage(img, 0, 0, canvaswidth, canvasheight)
            let content = canvas.toDataURL(file.file.type, 0.92) // 0.92为默认压缩质量
            let files = this.dataURLtoFile(content, file.file.name)
            formData.append("file", files);
            that.$api.post('/mobile/uploads/uprhimages', formData, r => {
              console.log('图片大于三MR:',r)
              //清除toast
              toast.clear();
              //将返回的图片地址放入file

              if (that.file[detail.name]) {
                r.data.src.forEach(function(item, index) {
                  that.file[detail.name].push(item);
                })
              } else {
                that.file[detail.name] = [];
                r.data.src.forEach(function(item, index) {
                  that.file[detail.name].push(item);
                })
              }

            })
            console.log('files',files);
            console.log('formData',formData);
          }
        } else { //小于3M直接上传
          formData.append("file", file.file);
          console.log()
          that.$api.post('/mobile/uploads/uprhimages', formData, r => {
            console.log('图片小于3',r)
            //将返回的图片地址放入file
            that.userinfo.pic = r.data.src;
            console.log('that.file',that.userinfo.pic)
            that.$toast.clear();
          })
        }
        return false;
      },
    },
  }
</script>

<style scoped>
  .van-uploader {
    height: 38px;
  }
  .van-button {
    position: absolute;
    right: 0;
    width: 94px;
  }
  .thumb-wrapper {
    display: flex;
    justify-content: space-around;
  }
  .form-box {
    width: 94%;
    margin: 0 auto;
    position: relative;
    top: -18px;
    border-radius: 8px;
    overflow: hidden;
  }
  .thumb-wrapper img {
    width: .9rem;
    height: .9rem;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }
  .exam-btn-info {
    width: 100%;
    padding: 14px 0;
    font-size: .34rem;
    text-align: center;
    color: #fff;
    outline: 0;
    border: 0;
    position: relative;
    top: -16px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    background-color: #297eff;
  }
   >>> .van-uploader__input  {
     position: absolute;
     right: 0;
     left: auto;
     width: 94px;
     height: 30px;
  }
</style>
